<template>
  <div class="book-list">
    <!-- 类型标签栏 -->
    <div class="category-header">
      <div class="category-tags">
        <van-tag 
          v-for="tag in tags" 
          :key="tag.type"
          :type="activeTag === tag.type ? 'primary' : 'default'"
          @click="switchCategory(tag.type)"
        >
          {{ tag.name }}
        </van-tag>
      </div>
    </div>

    <!-- 书籍列表 -->
    <van-list>
      <van-cell v-for="(book, index) in currentBookList" :key="index">
        <div class="book-item">
          <img :src="book.cover" class="book-cover" />
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>{{ book.author }}</p>
            <p>{{ book.keywords }}</p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义所有分类的数据
const allBooks = {
  scifi: [ // 玄幻言情
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o314c1e4a3fbe104be7c6257a3acf8511~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=o8go2xPldhfAk15H%2FxYAYlAti%2FM%3D',
    title: '我靠摆烂拯救了全宗门',
    author: '公主不回家',
    keywords: "'一觉睡醒....'"
  },
  {
    cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2ocabeb397d863711a04f8b2664cda5953~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=ii4Asx3QYiAD1vZWcdba8XvRzqA%3D',
    title: '小师妹的土味情话让师兄们破防了',
    author: '抓住星星',
    keywords:"'网瘾少女....'"
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o40bd1ba323cd5342fbaa89245195793b~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=CsTVgpiZmn2YysWLPHA06vSYAB8%3D',
    title: '全宗门都是恋爱脑,只有我是真疯批',
    author: '雪多锦',
    keywords: "'三岁的圆包...'" 
  },
  ],
  cityday: [ // 都市日常
    {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2oa5a5d1cc86ec81abb6d01380dbcf8457~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751815087&x-signature=Jrtooy16LR0lpYrsUVNU0%2Flb0Is%3D',
    title: '我不过作作妖,怎么就成了白月光',
    author: '叁生三三',
    keywords: "关键词:'男二上位'"
  },
  {
    cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2ocabeb397d863711a04f8b2664cda5953~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=ii4Asx3QYiAD1vZWcdba8XvRzqA%3D',
    title: '小师妹的土味情话让师兄们破防了',
    author: '抓住星星',
    keywords:"'网瘾少女....'"
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o40bd1ba323cd5342fbaa89245195793b~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=CsTVgpiZmn2YysWLPHA06vSYAB8%3D',
    title: '全宗门都是恋爱脑,只有我是真疯批',
    author: '雪多锦',
    keywords: "'三岁的圆包...'" 
  },
  ],
  history: [ // 历史古代
    {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2oce466ef06005c64d8ed95be23f8308e6~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751815086&x-signature=Y64rVbvh77eXMfo9ie36oLTOoks%3D',
    title: '资本小姐重生后,怀灵泉双胎随军',
    author: '瓜蛋',
    keywords: "关键词:'军婚','重生'"
  },
  {
    cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2ocabeb397d863711a04f8b2664cda5953~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=ii4Asx3QYiAD1vZWcdba8XvRzqA%3D',
    title: '小师妹的土味情话让师兄们破防了',
    author: '抓住星星',
    keywords:"'网瘾少女....'"
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o40bd1ba323cd5342fbaa89245195793b~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751813430&x-signature=CsTVgpiZmn2YysWLPHA06vSYAB8%3D',
    title: '全宗门都是恋爱脑,只有我是真疯批',
    author: '雪多锦',
    keywords: "'三岁的圆包...'" 
  },
  ]
};

// 类型标签配置
const tags = [
  { type: 'scifi', name: '玄幻言情' },
  { type: 'cityday', name: '都市日常' },
  { type: 'history', name: '历史古代' }
];

const activeTag = ref('scifi'); // 当前选中的类型

// 计算当前显示的书籍列表
const currentBookList = computed(() => {
  return allBooks[activeTag.value] || [];
});

// 切换分类
const switchCategory = (type) => {
  activeTag.value = type;
};
</script>

<style scoped>
.book-list {
  padding: 15px;
}

.category-header {
  display: flex;
  justify-content: center; /* 保持标签居中 */
  margin-bottom: 15px;
}

.category-tags {
  display: flex;
  gap: 10px;
}

.van-tag {
  font-size: 25px;
  padding: 10px 15px;
  height: auto;
  line-height: 1.5;
  border-radius: 13px;
}

/* 修改书籍项布局 */
.book-item {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  gap: 10px; /* 图片和文字间距 */
}

.book-cover {
  width: 60px;
  height: 80px;
  flex-shrink: 0; /* 防止图片被压缩 */
}

.book-info {
  flex: 1;
  text-align: left; /* 确保文字左对齐 */
  margin-left: 0; /* 移除默认左边距 */
}

/* 调整标题和作者信息的间距 */
.book-info h3 {
  margin: 0 0 5px 0; /* 只保留下方间距 */
}

.book-info p {
  margin: 0 0 3px 0; /* 减少段落间距 */
}
</style>
